<template>
    <div class="myOrder">
        <div class="myOrder_top">
            <MyDatails>
                <template #left>
                    <van-icon name="arrow-left" @click="$router.push('/myinfo')" />
                </template>
                <template #text>
                    <h3>我的订单</h3>
                </template>
            </MyDatails>
        </div>
        <div class="myOrder_main">
            <van-tabs v-model:active="active">
                <van-tab title="全部">
                    <MyRecommendCour :RecommendCourseList="CollectList">
                    </MyRecommendCour>
                </van-tab>
                <van-tab title="待支付">
                    <van-empty image="https://wap.lexuemiao.com/img/empty.503e5ccb.png" image-size="80"
                        description="暂无资料" />
                </van-tab>
                <van-tab title="待收讲义">
                    <van-empty image="https://wap.lexuemiao.com/img/empty.503e5ccb.png" image-size="80"
                        description="暂无资料" />
                </van-tab>
                <van-tab title="已完成">
                    <MyRecommendCour :RecommendCourseList="CollectList">
                    </MyRecommendCour>
                </van-tab>
                <van-tab title="已完成">
                    <van-empty image="https://wap.lexuemiao.com/img/empty.503e5ccb.png" image-size="80"
                        description="暂无资料" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
// const active = ref(0);
import axios from "axios";
import { useRouter } from "vue-router";
import MyRecommendCour from "../../components/MyRecommendCour.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
const { push } = useRouter();

const data = reactive({
    CollectList: [],
    id: JSON.parse(localStorage.getItem("token")).id + "",
});
axios
    .post("https://www.lexuemiao.com/api/order", {
        pay_states: "",
        user_id: data.id,
    })
    .then((res) => {
        console.log(res.data.data.data);
        data.CollectList = res.data.data.data;
    });
const { CollectList } = toRefs(data);
</script>
<style scoped lang='scss'>
.myOrder {
    width: 100vw;
    height: 100vh;

    .myOrder_top {
        width: 100%;
        height: 100px;
    }
}
</style>
